<template>
  <div class="user_item hover">
    <!-- 头像 -->
    <div class="user_info">
      <img :src="user.avatar" class="avatar">

      <div class="user_name">
        <span>
          {{ user.nick }}
        </span>
      </div>
    </div>

    <slot name="action">
    </slot>
    
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue';

export interface FriendRequestItem {
  userId: number,
  nick: string,
  avatar: string,
  status?:number
}

const props = defineProps({
  user: {
    type: Object as PropType<FriendRequestItem>,
    required: true
  }
})

</script>

<style lang="scss" scoped>
.user_item {
  padding: 10px;
  display: flex;
  justify-content: space-between;

  .user_info {
    display: flex;
    gap: 5px;
    flex: 1;

    .user_name {
      display: flex;
      align-items: center;
    }
  }

  .other {}

}
</style>
